<template>
  <div id="home">
    <mt-header fixed title="智能选股" v-if="isHeader"></mt-header>
    <div class="home-cont" :class="isHeader?'isHeader':''">
      <div class="home-banner"></div>
      <router-link class="home-title" to="pickStock">
        <div class="cont-t">
          <!--万能选股器-->
        </div>
      </router-link>
      <router-link class="home-title" to="hotNew">
        <div class="cont-t">
          <span>热点在哪里</span>
        </div>
      </router-link>
      <router-link class="home-title" to="">
        <div class="cont-t">
          <span>个股诊断器</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'home',
    data () {
      return {
        isHeader: false
      }
    },
    computed: {
    },
    created () {
      this.$store.dispatch('urlParams').then(res => {
        this.isHeader = this.$store.state.isHeader
      })
      this.$store.dispatch('setAllFactors')
    },
    mounted () {
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #home {
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .home-cont.isHeader {
      margin-top: 1.25rem !important;
    }
    .home-cont {
      /*margin-top: 1.25rem;*/
      .home-banner {
        height: 5.333333rem;
        background: url("../../static/img/bg_xg.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .home-title {
        .cont-t {
          height: 2.4rem;
          line-height: 2.4rem;
          background: grey;
          margin-bottom: 1px;
        }
        &:nth-of-type(1) {
          .cont-t {
            background: url("../../static/img/bg-wnxgq.png") no-repeat center center;
            background-size: 100% 100%;
            height: 3.4666667rem;
          }
        }
        &:nth-of-type(2) {
          .cont-t {
            background: url("../../static/img/bg-rdznl.png") no-repeat center center;
            background-size: 100% 100%;
            position: relative;
            span {
              position: absolute;
              right: 2.2rem;
              font-size: 0.48rem;
              color: #000000;
            }
          }
        }
        &:nth-of-type(3) {
          .cont-t {
            background: url("../../static/img/bg-ggzd.png") no-repeat center center;
            background-size: 100% 100%;
            span {
              position: absolute;
              right: 2.2rem;
              font-size: 0.48rem;
              color: #000000;
            }
          }
        }
      }
    }
  }
</style>
